<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>   
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <style>
    	.img_user{
    		width: 30px;height: 30px;
    		margin-top: 6px;
    		margin-left: 25px;
    		display: block;
    	}
    	.fl-right{
    		float: right;
    	}
    	.fl-left{
    		float: left;
    	}
    </style>
</head>
<body id="app">
	

		<header class="mui-bar mui-bar-nav">
	  
	   	<span id="user_left" class="mui-icon mui-icon-contact fl-left">
	   		
	   	</span>
        <span id="set_right" class="mui-icon mui-icon-gear fl-right">
        	
        </span>

	</span>
	</header>
	<nav class="mui-bar mui-bar-tab">
	    <a v-for="item in tabbar" class="mui-tab-item" v-bind:class="{'mui-active': $index === initIndex}" v-bind:href="item.url" v-on:tap="tab($index)">
	        <span class="mui-icon mui-icon-{{item.icon}}"></span>
	        <span class="mui-tab-label">{{item.title}}</span> 
	    </a> 
	</nav>
	
	<div class="mui-content"></div>
	
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue-mui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	</script>
	<script type="text/javascript" charset="utf-8">	
      	var app = new Vue({
      		el: '#app',
      		data: {
      			initIndex: 0, //[初始化参数]
      			title: '小屋',
      			activeTab: 'home/home.html',
      			tabbar: [
      				{icon:'home',title:'小屋',url: 'home/home.html',id:"home"},
      				{icon:'paperplane',title:'广场',url: 'space/listview.html',id:"space"},
      				{icon:'email',title:'待定',url: 'other/other.html',id:"other"}
      			],
      			subStyle: {
      				top: '45px',
					bottom: '51px'
      			}
      		},
      		ready: function() {
      			mui.init();
      			// Vue实例化对象
      			var self = this;  
      			// 初始化
      			if(mui.os.plus){
      				mui.plusReady(function() {
	      				var curWs = plus.webview.currentWebview();
	      				for(var i=0;i < self.tabbar.length;i++){
	      					var subUrl = self.tabbar[i].url; 
	      					var subid = self.tabbar[i].id; 
	      					console.log(subid);

	      					var subWs = plus.webview.create(subUrl, subUrl, self.subStyle);
							if(i != self.initIndex){
								subWs.hide();
							}
							curWs.append(subWs);
	      				}	
	      			})
      			}else{
      				createIframe('.mui-content',{
						url: self.tabbar[self.initIndex].url,
						style: self.subStyle
					})
      			}
      		},
      		methods: {
				tab: function (index) {	
					var targetTab = this.tabbar[index].url;  
					/*var targetid = this.tabbar[index].id;
					if(targetid=='set'){
						
						mui.openWindow({
							url:'set/setting.html',
							id:'setting'
						})
					}*/
					// 标题切换
					this.title = this.tabbar[index].title;
					// 子页内容切换
					if(mui.os.plus){
						// 显示目标webview
						plus.webview.show(targetTab);
						// 隐藏当前webview
						plus.webview.hide(this.activeTab);
						// 更改当前活跃的选项卡
						this.activeTab = targetTab;
					}else{
						// 创建iframe代替子页面
						createIframe('.mui-content',{ 
							url: targetTab,
							style: this.subStyle
						})
					}
				}
      		}
      	})
    </script>
 <script>
 	mui.plusReady(function(){
 		document.getElementById('user_left').addEventListener('tap',function(){
 			console.log("aa");
 		});
 	})
 </script>
</body>
</html>